<template>
    <view class="normal-login-container">
		<view class="login-form-content">
		  <view class="input-item flex align-center">
		    <view class="iconfont icon-user icon"></view>
		    <input v-model="loginForm.username" class="input" type="text" placeholder="请输入账号" maxlength="30" />
		  </view>
		  <view class="input-item flex align-center">
		    <view class="iconfont icon-password icon"></view>
		    <input v-model="loginForm.password" type="password" class="input" placeholder="请输入密码" maxlength="50" />
		  </view>
		  
		  <view class="action-btn">
			<button @click="handleLogin" class="login-btn cu-btn block bg-blue lg round" >登录</button>
		  </view>
		</view>
	</view>
</template>

<script setup>
	import { ref } from "vue";
	import { login } from '@/api/msgbox'
	import config from '@/config'
	let loginForm = ref({});
	
	let wsbaseUrl = ref(config.wsbaseUrl);
	if (process.env.NODE_ENV === 'development') {
	  wsbaseUrl.value = config.wsbaseUrlKaifa
	} else {
	  wsbaseUrl.value = config.wsbaseUrl
	}
	
	function handleLogin(){
		login(loginForm.value).then(res => {
			console.log("res=======",res);
			
			uni.showToast({
			  title: res.msg,
			  mask: false,
			  duration: 3000
			});
			
			let tourl = "";
			tourl = "/pages/index/chatmain";
			uni.navigateTo({url: tourl});
		}).catch(() => {
		});
	}
</script>

<style lang="scss">

	page {
	  background-color: #ffffff;
	}
	
	.normal-login-container {
	  width: 100%;
	
	  .logo-content {
	    width: 100%;
	    font-size: 21px;
	    text-align: center;
	    padding-top: 15%;
	
	    image {
	      border-radius: 4px;
	    }
	
	    .title {
	      margin-left: 10px;
	    }
	  }
	
	  .login-form-content {
	    text-align: center;
	    margin: 20px auto;
	    margin-top: 15%;
	    width: 80%;
	
	    .input-item {
	      margin: 20px auto;
	      background-color: #f5f6f7;
	      height: 45px;
	      border-radius: 20px;
	
	      .icon {
	        font-size: 38rpx;
	        margin-left: 10px;
	        color: #999;
	      }
	
	      .input {
	        width: 100%;
	        font-size: 14px;
	        line-height: 20px;
	        text-align: left;
	        padding-left: 15px;
	      }
	
	    }
	
	    .login-btn {
	      margin-top: 40px;
	      height: 45px;
	    }
	
	    .xieyi {
	      color: #333;
	      margin-top: 20px;
	    }
	    
	    .login-code {
	      height: 38px;
	      float: right;
	    
	      .login-code-img {
	        height: 38px;
	        position: absolute;
	        margin-left: 10px;
	        width: 200rpx;
	      }
	    }
	  }
	}
</style>
